<template>
<!-- 合规与保密 -->
    <div class='compliance'>
        <div class="addserve" :style='{top:styleall}'>
            <el-button @click="addserve" class="fr" size="small" type="primary">保存</el-button>
        </div>
        <el-form ref="form" class="resform" label-width="120px">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>多方面确保文章保密</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="左一标题">
                            <el-input v-model="article_confidentiality.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="右一标题">
                            <el-input v-model="article_confidentiality.input3" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="左一描述">
                            <el-input v-model="article_confidentiality.input2" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="右一描述">
                            <el-input v-model="article_confidentiality.input4" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="左二标题">
                            <el-input v-model="article_confidentiality.input5" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="右二标题">
                            <el-input v-model="article_confidentiality.input7" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="左二描述">
                            <el-input v-model="article_confidentiality.input6" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="右二描述">
                            <el-input v-model="article_confidentiality.input8" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>完全符合学术规范</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="图片一">
                            <uploadItem @openimg='openimg' :item='academic_norm' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>服务保障</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="图片一">
                            <uploadItem @openimg='openimg' :item='service_guarantee' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <!-- <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>成功案例</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="confidentiality.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述">
                            <el-input v-model="confidentiality.input2" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="轮播图一">
                            <uploadItem @openimg='openimg' :item='confidentiality' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="轮播图二">
                            <uploadItem @openimg='openimg' :item='confidentiality' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="轮播图三">
                            <uploadItem @openimg='openimg' :item='confidentiality' :imgname="'img3'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="轮播图四">
                            <uploadItem @openimg='openimg' :item='confidentiality' :imgname="'img4'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="轮播图五">
                            <uploadItem @openimg='openimg' :item='confidentiality' :imgname="'img5'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card> -->
        </el-form>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import uploadItem from "@/views/web/components/uploadItem";
import { selectPages,addPageValue,updatePageValue} from "@/api/pc.js"
export default {
    name:'Compliance',
    data(){
       return{
        uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        headers: { Authorization: "Bearer " + getToken()},
        // 图片弹窗
        dialogVisible:false,
        // 弹窗图片地址
        dialogImageUrl:'',
        // 学术规范
        article_confidentiality:{input1:'',input2:'',input3:'',input4:'',input5:'',input6:'',input7:'',input8:'',},
        // 投稿流程
        academic_norm:{img1:''},
        // 服务保障
        service_guarantee:{img1:''},
        // 成功案例
        confidentiality:{input1:'',input2:'',img1:'',img2:'',img3:'',img4:'',img5:''},
        // 编辑
        edit:false,
        // 编辑
        pageId:'',
        // 样式
        styleall:{},
       }
    },
    components:{uploadItem},
    mounted(){this.getdata();window.addEventListener('scroll',this.handleScroll);},
    methods:{
        // 滚动事件
        handleScroll(){
            // 滚动条偏移量
            let scrollTop = document.documentElement.scrollTop;
            if(scrollTop>80){this.styleall ='0px';}else{ this.styleall =(80 - scrollTop) +'px'; }
        },
        // 保存
        addserve(){
            let objall = {
                article_confidentiality:this.article_confidentiality,
                academic_norm:this.academic_norm,
                service_guarantee:this.service_guarantee,
                confidentiality:this.confidentiality,
            }
            let obj={pageName:'合规与保密',pageType:'compliance',pageValue:JSON.stringify(objall),}
            if(!this.edit){
                addPageValue(obj).then(res=>{
                    console.log(res)
                    if(res.code==200){this.$message.success('保存成功！')}
                })
            }else{
                obj.pageId = this.pageId;
                updatePageValue(obj).then(res=>{
                    console.log(res)
                    if(res.code==200){this.$message.success('更新成功！')}
                })
            }
        },
        // 获取数据
        getdata(){
            selectPages({pageType:'compliance'}).then(res=>{
                if(res.code==200){
                    if(res.data.length==0){
                        this.edit = false;
                    }else{
                        this.edit = true;
                        this.pageId = res.data[0].pageId;
                        console.log(JSON.parse(res.data[0].pageValue))
                        let obk = JSON.parse(res.data[0].pageValue);
                        this.academic_norm = obk.academic_norm;
                        this.article_confidentiality = obk.article_confidentiality;
                        this.confidentiality = obk.confidentiality;
                        this.service_guarantee = obk.service_guarantee;
                    }
                }
            })
        },
        // 打开全屏图片
        openimg(val){
            this.dialogImageUrl = val;
            this.dialogVisible = true;
        },
    }
}
</script>
<style lang='scss' scoped>
.compliance{
    width: 100%;
    height: 100%;
    padding: 20px;
    padding-top: 50px;
}
.addserve{
    width: 100%;
    height: 40px;
    position: fixed;
    top:80px;
    left: 0;
    background-color: #fff;
    padding-right: 30px;
    z-index: 101;
    button{
        margin-top: 4px;
        width: 100px;
    }
}
</style>